<template>
	<scroller :on-refresh="refresh" :on-infinite="infinite">
		<ul class="topics">
			<router-link tag="li" v-for="(v, i) in topics" :key="'pic' + i" :to="{name: 'tdetail', params: {id: v.articleId}}">
				<figure>
					<img :src="v.articleImg | hasdomain">
				</figure>
			</router-link>
		</ul>
	</scroller>
</template>

<script>
export default {
	data() {
		return {
			topics: [],
			offset: 0,
			limit: 10,
		}
	},
	methods: {
    getTopics(done) {
      this.$http.fetchGet('getShushuArticle', {
        catId: 1,
        offset: this.offset,
        limit: this.limit,
      }).then(({ data = [] }) => {
        console.log('测算专题', data);
        if(this.offset == 0) this.topics = data;
        else this.topics.push(...data);
				done && done(!data.length);
				if(data.length == 0) this.offset -= this.limit;
      })
		},
    refresh(done) {
      this.offset = 0;
      this.getTopics(done);
    },
    infinite(done) {
      this.offset += this.limit;
      this.getTopics(done);
    },
	},
	created() {
		this.getTopics();
	}
}
</script>

<style scoped lang="less">
.topics{
	background-color: @bgColor;
	li{
		position: relative;
		.mb(20);
		&:last-child{
			margin-bottom: 0;
		}
		&::after{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .2);
		}
		figure{
			img{
				display: block;
				width: 100%;
			}
		}
		p{
			.f30;
			.w(420);
			.h(110);
			.lh(110);
			background-color: rgba(255,255,255,.4);
			text-align: center;
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 1;
			transform: translate(-50%, -50%);
		}
	}
}
</style>